import React, { FC, useState, useEffect, useRef } from 'react'
import Option from './Option'
import Position from './Position'
import { ISelectProps, IOptionCategories, IOptionFilters } from './interface'
import './index.less'

const Select: FC<ISelectProps> = ({
    dataSource,
    defaultValue = '',
    placeholder = '',
    onChange = () => { },
}) => {
    // 控制下拉面板是否可见
    const [visible, setVisible] = useState(false)
    // 下拉框中当前选中的项
    const [selectedItem, setSelectedItem] = useState({ value: defaultValue, label: '' })

    // 根据 defaultValue 处理初始化值
    useEffect(() => {
        if (!defaultValue) return
        if (dataSource.categories && Array.isArray(dataSource.categories)) {
            const option = dataSource.categories.find(option => option.val === defaultValue)
            if (option) {
                setSelectedItem({ value: option.val, label: option.label })
            }
        }
        if (dataSource.filters && Array.isArray(dataSource.filters)) {
            const option = dataSource.filters.find(option => option.val === defaultValue)
            if (option) {
                setSelectedItem({ value: option.val, label: option.name })
            }
        }
    }, [defaultValue])

    // 下拉框 Dom 引用
    const inputRef = useRef(null)

    // 选中下拉选项时触发事件
    const onSelect = (value: string, label: string) => {
        setSelectedItem({ value, label })
        onChange({ value, label })
    }

    // 渲染 Categories - Option
    const renderOptionCategories = (
        (dataSource?.categories && Array.isArray(dataSource.categories)) ? (
            <>
                <div className="option-group-title">Your Categories</div>
                {
                    dataSource.categories.map((item: IOptionCategories) => (
                        <Option
                            key={item.val}
                            value={item.val}
                            label={item.label}
                            type="radio"
                            defaultValue={selectedItem.value}
                            onSelect={onSelect}
                        />
                    ))
                }
            </>
        ) : null
    )

    // 渲染 Filters - Option
    const renderOptionFilters = (
        (dataSource?.filters && Array.isArray(dataSource.filters)) ? (
            <>
                <div className="option-group-title">Your saved filters</div>
                {
                    dataSource.filters.map((item: IOptionFilters) => (
                        <Option
                            key={item.val}
                            value={item.val}
                            label={item.name}
                            defaultValue={selectedItem.value}
                            onSelect={onSelect}
                        />
                    ))
                }
            </>
        ) : null
    )

    // 渲染下拉面板
    const renderSelectPanel = (
        visible ? (
            <Position
                onClose={() => setVisible(false)}
                targetRef={inputRef}
            >
                <>
                    {renderOptionCategories}
                    {renderOptionFilters}
                </>
            </Position>
        ) : null
    )

    return (
        <>
            <input
                className="select"
                value={selectedItem.label}
                placeholder={placeholder}
                onClick={() => setVisible(true)}
                ref={inputRef}
                readOnly />
            {renderSelectPanel}
        </>
    )
}

export default Select